<template>
  <div>
    <el-autocomplete
      class="inline-input"
      :style="{ width: width + 'px' }"
      :class="[ width ? '' : 'wid220' ]"
      v-model="showName"
      clearable
      @clear="Clear()"
      ref="searchSelect"
      :fetch-suggestions="
        (queryString, cb) => {
          querySearchAsync(queryString, cb);
        }
      "
      :placeholder="placeholder"
      :trigger-on-focus="false"
      @select="
        item => {
          handleSelect(item);
        }
      "
      ><template slot-scope="{ item }">
        <div class="main_name" :style="{opacity:(item.is_inventory==2 && isInventory)?0.5:1}">
          <span v-if="url == 3">{{ item.name }}</span>
          <!-- <span v-if="goodName">{{ goodName }}</span> -->
          <span class="flex-btw" v-else>
            <span>
              {{ item.goods.name }}【{{
                item.spu_name ? item.spu_name.title : ""
              }}】
            </span>
            <span v-if="item.is_del" style="color:red;">已删除</span>
          </span>
          <span class="code">{{ item.goods_spu_code }}</span>
        </div>
      </template></el-autocomplete
    >
  </div>
</template>

<script>
import { goods_getAllGoodsSpu, goods_getGoodsSpu } from "@/api/currency";
import { turnoverOrder_searchItems } from "@/api/warehouse/warehouseTurnOrder.js";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { getInfo } from '@/api/menu.js'

export default {
  props: {
    url: {
      // 空  =>goods_getAllGoodsSpu
      // 1  =>goods_getGoodsSpu  添加订单
      // 2 => turnoverOrder_searchItems  周转商品  物品借出搜索
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "商品名称/助记码/编码"
    },
    isInventory:{
      type: Boolean,
      default: false
    },
    isPurchase: {
      type: String,
      default: '0',
    },
    width: {
      type: String,
      default: ''
    },
    isMenu: {
      type: Boolean,
      default: false
    },
    goodName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      name: ""
    };
  },
  computed: {
    showName: {
      get() {
        return this.isMenu ? this.goodName : this.name
      },
      set(val) {
        if(this.isMenu) {
          this.$emit('changeValue', val)
        }else {
          this.name = val
        }
      }
    }
  },
  methods: {
    getMenuList(params) {
      return new Promise((resovle, reject) => {
        getInfo('/packageMenu/packagelist', params).then(res => {
          if(res.errcode == 0) {
            resovle(res)
          }else {
            reject()
          }
        }).catch(err => {
          reject(err)
        })
      })
    },
    querySearchAsync(queryString, cb) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, { name: queryString.trim() })
            ) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        {
          name: queryString.trim(),
          allow_below_shelf: this.url == 1 ? 1 : ""
        }
      );

      if(this.isPurchase == 1) {
        data.is_purchase = this.isPurchase;
      }

      if (this.url != 1) {
        delete data.allow_below_shelf;
      }

      let func = null;
      switch (this.url) {
        case "1":
          func = goods_getGoodsSpu;
          break;
        case "2":
          func = turnoverOrder_searchItems;
          break;
        case "3":
          func = this.getMenuList;
          break;
        default:
          func = goods_getAllGoodsSpu;
          break;
      }
      func(data).then(res => {
        if (res.errcode == 0) {
          let results = [];
          if(this.url == 3) {
            results = res.data
          }else if (this.url == 2) {
            res.data.list.map(e => {
              e.spu_name = "";
              e.spu_name = e.goods_spu.spu_name;
              e.goods_spu_code = e.goods_spu.goods_spu_code;
              e.name = e.goods.name + "【" + e.spu_name.title + "】";
            });
            results = res.data.list;
          } else {
            res.data.goods.map(e => {
              let title = e.spu_name ? e.spu_name.title : "";
              e.name = e.goods.name + "【" + title + "】";
            });
            results = res.data.goods;
          }
          if (this.$refs.searchSelect) {
            this.$refs.searchSelect.activated = true;
          }
          cb(results);
        } else {
          this.$message.error(res.errmsg);
          cb([]);
        }
      });
    },
    handleSelect(item) {
      if(item.is_inventory==2 && this.isInventory){
        this.$message.error('此商品为调拨商品')
        return
      }
      this.name = item.name;
      this.$emit("sendValue", item);
    },
    Clear() {
      this.$emit("clear");
    },
    focus() {
      this.$refs["searchSelect"].focus();
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.main_name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: initial;
  padding: 0 0;
  height: 40px;
  .code {
    color: #999;
  }
}
</style>
